<template>
	<view class="content">
		<view class="content-date">
			{{date}}
		</view>
		<picker class="choose" mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
			选择
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate
			}
		},
		computed: {
			startDate() {
				return this.getDate("start")
			},
			endDate() {
				return this.getDate("end")
			}
		},
		methods: {
			bindDateChange(e) {
				this.date = e.target.value
				this.$emit("onChange", this.date)
			},
			getDate(type) {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1

				if (type === 'start') {
					year = year - 60
				} else if (type === 'end') {
					year = year + 2
				}
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 25rpx;
		background-color: #FFFFFF;
	}
	
	.content-date {
		font-size: 46rpx;
		line-height: 96rpx;
	}
	
	.choose {
		width: 96rpx;
		height: 44rpx;
		font-size: 26rpx;
		border-radius: 22rpx;
		background-color: #333;
		text-align: center;
		color: #FFFFFF;
		line-height: 44rpx;
	}
</style>
